<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/resouces/layui/css/layui.css">
    <script src="/static/resouces/layui/layui.js"></script>
    <script src="/static/resouces/jquery/jquery-3.6.0.min.js"></script>
    <style>
        html, body, .bg {
            width: 100%;
            height: 100%;
        }

        .bg {
            background-image: url("/static/resouces/jquery/img/2.jpg");
            background-size: cover;
            position: fixed;
            z-index: -1;
        }

        ::-webkit-scrollbar{
            /*滚动条整体样式*/
            width : 5px;  /*高宽分别对应横竖滚动条的尺寸*/
        }
        ::-webkit-scrollbar-track {
            /*滚动条里面轨道*/
            box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
            border-radius: 5px;
            background   : #ededed;
        }
        ::-webkit-scrollbar-thumb {
            /*滚动条里面小方块*/
            border-radius: 5px;
            box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
            background   : #3ad183;
        }
        .layui-form-label {
            color: white;
        }
    </style>
</head>
<body>
<div class="bg"></div>
    <div style="padding: 50px;">
        <form class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">相册名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="name" required lay-verify="required" placeholder="请输入相册名称"
                           autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux"></div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">相册类型</label>
                <div class="layui-input-inline">
                    <select id="type" name="typeId" lay-verify="required">
                        <option value="">请选择相册类型</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">相册封面</label>
                <div class="layui-input-block">
                    <input id="imgUrl" name="imgUrl" lay-verify="required" type="hidden">
                    <div class="layui-upload">
                        <button type="button" class="layui-btn" id="imgUpload">上传图片</button>
                        <div class="layui-upload-list">
                            <img width="400px" class="layui-upload-img" id="demo1">
                        </div>
                        <div style="width: 400px;">
                            <div style="display: none" class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
                                <div class="layui-progress-bar" lay-percent=""></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="errorUpload" class="layui-form-mid layui-word-aux"></div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">相册所属</label>
                <div class="layui-input-inline">
                    <select id="ownership" name="ownership" lay-verify="required">
                        <option value="">请选择所属人</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">相册权限</label>
                <div class="layui-input-inline">
                    <select name="permission" lay-verify="required">
                        <option value="">请选择相册权限</option>
                        <option value="0">公开</option>
                        <option value="1">私有</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button id="submit" class="layui-btn" lay-submit lay-filter="formDemo">创建相册</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
<script>
    //Demo
    layui.use(['form', 'upload', 'element', 'layer'], function () {
        var $ = layui.jquery
            , upload = layui.upload
            , element = layui.element
            , form = layui.form
            , layer = layui.layer;

        $.get({
            url:'/api/admin/albums/types',
            type:'GET',
            datatype: 'json',
            success: function (res) {
                if (res.code===0){
                    $.each(res.data, function (i, item){
                        $('#type').append(new Option(item.typeName,item.id));//往下拉菜单里添加元素
                    });
                    form.render();
                }else layer.msg("获取相册类型失败");
            }
        });
        $.get({
            url:'/api/admin/users/info',
            type:'GET',
            datatype: 'json',
            success: function (res) {
                if (res.code===0){
                    $.each(res.data, function (i, item){
                        $('#ownership').append(new Option(item.nickname,item.id));//往下拉菜单里添加元素
                    });
                    form.render();
                }else layer.msg("获取用户类型失败");
            }
        })

        var uploadInst = upload.render({
            elem: '#imgUpload'
            , url: '/image/upload/images' //改成您自己的上传接口
            , multiple: false             //只允许上传一张
            //,auto:false                  //不自动上传
            //,bindAction:"#submit"        //点击后提交
            , before: function (obj) {
                let oldUrl = $("#imgUrl").val();
                if (oldUrl !== "") {
                    //删除旧图片
                    oldUrl = oldUrl.substring(oldUrl.lastIndexOf('/'));
                    $.ajax({
                        url: '/image/upload/images' + oldUrl,
                        type: 'POST',
                        data: {
                            _method: "DELETE"
                        },
                        datatype: 'json',
                        success: function (res) {
                            console.log(res.code === 0 ? "删除旧图片成功" : "删除旧图片失败");
                        }
                    })
                }
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#demo1').attr('src', result); //图片链接（base64）
                });

                element.progress('demo', '0%'); //进度条复位
                $(".layui-progress").attr("style","display:block");
                layer.msg('上传中', {icon: 16, time: 0});
            }
            , done: function (res) {
                if (res.code === -1) layer.msg('上传出错');
                //如果上传失败
                if (res.code > 0) {
                    return layer.msg('上传失败');
                    var eud = $('#errorUpload');
                    eud.html('<a class="layui-btn demo-reload layui-btn-danger">错误请重试</a>');
                    eud.find('.demo-reload').on('click', function () {
                        uploadInst.upload();
                    });
                } else {
                    //上传成功的一些操作
                    $('#errorUpload').html(''); //置空上传失败的状态
                    $("#imgUrl").val(res.data);
                }
            }
            , error: function () {
                //演示失败状态，并实现重传
                var eud = $('#errorUpload');
                eud.html('<a class="layui-btn demo-reload layui-btn-danger">错误请重试</a>');
                eud.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
            //进度条
            , progress: function (n, index, e) {
                element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
                if (n == 100) {
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        });

        //监听提交
        form.on('submit(formDemo)', function (data) {
            $.ajax({
                url: '/api/admin/albums',
                type: 'POST',
                data: data.field,
                datatype: 'json',
                success: function (res) {
                    let flag = res.code === 0;
                    layer.msg(flag ? "保存成功" : "保存失败");
                    if (flag) {
                        $(":input").val("");
                        $("#demo1").removeAttr("src"), element.progress('demo', '0%');
                        $(".layui-progress").attr("style","display:none");
                    }
                    ;
                }
            })
            return false;
        });

        //页面关闭时
        window.onunload = function () {
            let oldUrl = $("#imgUrl").val();
            if (oldUrl !== "") {
                //删除旧图片
                oldUrl = oldUrl.substring(oldUrl.lastIndexOf('/'));
                $.ajax({
                    url: '/image/upload/images' + oldUrl,
                    type: 'POST',
                    data: {
                        _method: "DELETE",
                        check: true
                    },
                    datatype: 'json',
                    success: function (res) {
                        console.log(res.code === 0 ? "删除旧图片成功" : "删除旧图片失败");
                    }
                })
            }
        };
    });
</script>
</body>
</html>
